<template>
  <view class="container">
    <view class="header">
      <image
        src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/demand/demandHeader.png"
      >
      </image>
    </view>
    <view class="content">
      <view class="cu-form-group">
        <view class="title"
          ><text style="color: #ff6161; font-size: 36rpx">*</text>
          需求类型</view
        >
        <chose-cate @change1="cateName" :cateList="cateList">
          <view class="picker" style="color: #999">
            {{ categoryName }}
          </view>
        </chose-cate>
      </view>
      <view class="cu-form-group align-start solid-bottom">
        <view class="title"
          ><text style="color: #ff6161; font-size: 36rpx">*</text>
          需求描述</view
        >
        <textarea
          maxlength="-1"
          v-model="demandDes"
          placeholder="请尽可能的详细描述您的需求~"
        ></textarea>
      </view>
      <view class="cu-bar bg-white">
        <view class="action" style="color: #333"> 上传图片 </view>
        <view class="action"> {{ imgList.length }}/5 </view>
      </view>
      <view class="cu-form-group">
        <view class="grid col-4 grid-square flex-sub">
          <view
            class="bg-img"
            v-for="(item, index) in imgList"
            :key="index"
            @tap="ViewImage"
            :data-url="imgList[index]"
          >
            <image :src="imgList[index]" mode="aspectFill"></image>
            <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
              <text class="cuIcon-close"></text>
            </view>
          </view>
          <view class="solids" @tap="chooseImgType" v-if="imgList.length < 5">
            <text class="cuIcon-cameraadd"></text>
          </view>
        </view>
      </view>
      <view class="cu-form-group">
        <view class="title">需求预算(元)</view>
        <input
          :placeholder="priceStatus ? '具体价格请面议' : '请输入'"
          name="input"
          v-model="demandPrice"
          type="digit"
          :disabled="priceStatus"
        />
        <view style="color: #ff6161" @click="changePrice">{{
          priceStatus ? "价格" : "面议"
        }}</view>
      </view>
      <view class="cu-form-group">
        <view class="title"
          ><text style="color: #ff6161; font-size: 36rpx">*</text>
          截止时间</view
        >
        <picker
          mode="date"
          :value="date"
          :start="startDate"
          @change="DateChange"
        >
          <view class="picker" style="color: #999">
            {{ demandDate }}
          </view>
        </picker>
      </view>
      <view class="cu-form-group">
        <view class="title"
          ><text style="color: #ff6161; font-size: 36rpx">*</text>
          服务地址</view
        >
        <view @click="showCityListFn">
          <chose-region :disabled="true" @change1="regionName">
            <view class="picker" style="color: #999">
              {{ cityName }}
            </view>
          </chose-region>
        </view>
      </view>
    </view>
    <view class="bottom-btn">
      <view class="btn" @click="subDemand">
        <text>发布任务</text>
      </view>
    </view>

    <!-- 授权上传图片的弹窗 -->
    <yk-authpup
      ref="authpup"
      type="top"
      @changeAuth="changeAuth"
      :permissionID="permissionID"
    ></yk-authpup>

    <!-- 选择拍摄还是从相册中 -->
    <view v-if="showChooseImg">
      <u-action-sheet
        :actions="showChooseImgList"
        :show="showChooseImg"
        cancelText="取消"
        @close="showChooseImg = false"
        :closeOnClickAction="true"
        @select="selectClick"
      ></u-action-sheet>
    </view>

    <!-- 完成任务弹窗 -->
    <pointsTips
      v-if="showPointsTips"
      :title="pointsObj.name"
      :points="pointsObj.amount"
    ></pointsTips>

    <!-- 服务区域 -->
    <u-popup :show="showCityList" @close="closeCityList">
      <view class="city_list" style="height: 80vh; padding: 30rpx 0">
        <wfAddress @getCityInfo="getCityInfo"></wfAddress>
      </view>
    </u-popup>
  </view>
</template>

<script
  type="text/javascript"
  src="plus-confusion://../enterpriseServer/publishDemand/index"
></script>

<style lang="scss" scoped>
@import "index.scss";
</style>
